<template>
  <div id="loginContent">
    <div id="login">
      <el-form
        :rules="UserRules.loginRules"
        :model="loginDTO"
        ref="loginForm"
        status-icon
        @keydown.enter="login(loginForm)"
      >
        <el-form-item prop="userName">
          <el-input placeholder="用户名" clearable v-model="loginDTO.userName" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="密码" show-password clearable v-model="loginDTO.password" />
        </el-form-item>
        <el-form-item>
          <el-button
            color="#626aef"
            :loading="loading"
            style="width: 100%; border-radius: 10px"
            type="primary"
            @click="login(loginForm)"
            >登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
// ----------------------------------导入区---------------------------------
import { onMounted, reactive, ref } from 'vue'
import type { LoginUserType } from '@/resources/interface/user/UserTypes.ts'
import { UserParams } from '@/resources/parameters/user/UserParameters.ts'
import { UserRules } from '@/resources/rules/user/UserRules.ts'
import { UserApi } from '@/apis/api/user/UserApi.ts'
import { setToken } from '@/utils/TokenUtil.ts'
import { useUserStore } from '@/stores/counter.ts'
import { constructMenuRouter } from '@/router/ConstructMenuRouter.ts'
import { ElNotification, type FormInstance } from 'element-plus'
import { useRouter } from 'vue-router'

// ----------------------------------数据区---------------------------------
const loading = ref(false)
const loginDTO = reactive<LoginUserType>(UserParams.loginDTO)
const loginForm = ref<FormInstance | undefined>(undefined)
const router = useRouter()
// ----------------------------------方法区---------------------------------
const login = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    loading.value = true
    if (valid) {
      const result = await UserApi.login(loginDTO)
      if (result.sign) {
        setToken(result.data.token)
        const userStore = useUserStore()
        userStore.setUser({
          userName: result.data.userName,
          realName: result.data.realName,
          role: result.data.role,
          id: result.data.id,
        })
        await constructMenuRouter()
        ElNotification.success({
          title: '登录成功',
          message: '欢迎回来',
          duration: 1000,
          onClose: () => {
            loading.value = false
            resetForm(formEl)
            router.push('/')
          },
        })
      }
      loading.value = false
    } else {
      ElNotification.error('请填写正确的登录信息')
      loading.value = false
    }
  })
}
/**
 * 重置表单
 * @param formEl 表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

onMounted(() => {
  //注册一个回调函数,在组件挂载完成后执行
})
</script>

<style scoped>
#loginContent {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background-image: url('/src/assets/bg.jpg');
  background-size: 100% 100%;
  background-attachment: fixed;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#login {
  width: 300px;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
